<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe 高度自适应 demo</title>
    <style>
        .text {
            font-weight: bold;
        }
        pre {
            font: 14px/1.3 Consolas, Monaco, monospace;
            padding: 5px 10px;
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #ccc;
        }

        .code {
            width: 50%;
            display: inline-block;
            vertical-align: top;
        }

        iframe {
            width: 40%;
            height: 307px;
            display: inline-block;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="code">
        <p class="text">iframe 指定网页关键代码</p>
        <pre>
// 点击展开全部/收起按钮时，执行 resizeIframeParentHeight 方法，重新设置 iframe 高度，打到自适应效果

function resizeIframeParentHeight() {
    var iframeHeight = document.body.scrollHeight;
    var iframe = window.parent.document.getElementById('iframe');
    iframe.style.height = iframeHeight + 'px';
}
        </pre>
    </div>
    <iframe id="iframe" src="./iframe-child.html"></iframe>
    

    
    <script>
    function parentFn () {
        console.log('我是父页面的方法，这是来自 iframe 的调用');
    }
    </script>
</body>

</html>
